<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-AR"><!-- InstanceBegin template="/Templates/tutorial.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>¿Cómo hago para crear un documento html? - Tutorial Maquetado HTML</title>
<!-- InstanceEndEditable -->
<link rel="stylesheet" type="text/css" href="../css/screen.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../css/screen-black-on-white.css" media="screen" title="Negro sobre blanco" />
<link rel="alternate stylesheet" type="text/css" href="../css/screen-white-on-black.css" media="screen" title="Blanco sobre negro" />
<link rel="stylesheet" type="text/css" href="../css/print.css" media="print" />
<meta name="author" content="Martin Alterisio &lt;malterisio777@gmail.com&gt;" />
<meta name="copyright" content="&copy; Martin Alterisio 2009" />
<link rel="license" href="http://creativecommons.org/licenses/by-nc-nd/2.5/ar/legalcode" />
<script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../js/tutorial.js"></script>
<!-- InstanceBeginEditable name="head" -->
<meta name="date" content="2009-10-20" />
<!-- InstanceEndEditable -->
</head>

<body>
<!-- InstanceBeginEditable name="body" -->
	<div class="navegacion">
		<div>
			<a href="../index.html">Inicio</a>
			<a href="index.html">Capítulo</a>
		</div>
	</div>
	<div id="contenido">
		<h1>Introducción al maquetado HTML</h1>
		<h2>¿Cómo hago para crear un documento html?</h2>
		<p>Un documento html es sencillamente un archivo de texto plano, o sea basicamente lo mismo que un archivo con extensión <code>.txt</code> pero usamos la extensión <code>.html</code> o <code>.htm</code> para distinguirlo de otro formato (en realidad no hace falta que el documento html lleve esta extensión, existen otros mecanismos para definir el tipo de archivo, que veremos más adelante). Para crear un documento html necesitamos cualquier editor de texto plano del que dispongamos, por ejemplo el notepad de Windows. Unicámente hay que tener el cuidado de grabar el archivo con la extensión adecuada.</p>
		<p>A modo de ejemplo, probemos crear un documento html simple. En el editor de texto copien el contenido del siguiente documento html:</p>
		<pre><code>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot;
	&quot;http://www.w3.org/TR/html4/strict.dtd&quot;&gt;
&lt;html lang=&quot;es-AR&quot;&gt;
&lt;head&gt;
	&lt;title&gt;Hola mundo!&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;p&gt;Hola mundo!&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
		<p>Guardenlo como <code>hola-mundo.html</code>.</p>
		<p> Al usar la extensión <code>.html</code> el sistema operativo y el navegador (Firefox, Internet Explorer, Safari, etc) deberían reconocerlo como documento html. Si lo abrimos con un navegador deberíamos ver una página que diga:</p>
		<blockquote>Hola mundo!</blockquote>
		<p>Y eso es todo lo que nos hace falta para empezar a crear documentos html. Sin embargo conviene particularmente tener instaladas diferentes versiones de navegadores para hacer pruebas de como se ven según el navegador y la versión del navegador.</p>
		<p>Esto puede ser un soberano dolor de huevos, ya que a veces la página se ve distinta según el sistema operativo del usuario (ya que la versión del navegador es distinta según el sistema operativo), o porque es realmente complicado tener instaladas diferentes versiones del mismo navegador. Para resolver este problema existen soluciones puntuales, desde aplicaciones que simulan los diferentes navegadores, aplicaciones online que ofrecen screenshots de la página según navegador y sistema operativo, o incluso correr el sistema operativo y el navegador usando <em>virtualización</em>.</p>
		<h3>¿Con qué navegadores me recomendas trabajar?</h3>
		<p>Al día de hoy (fines del 2009) este es el coctél de navegadores con el que tengo que curtirme diariamente:</p>
		<ul>
			<li>Internet Explorer 6.0</li>
			<li>Internet Explorer 7.0</li>
			<li>Internet Explorer 8.0 (modo compatibilidad)</li>
			<li>Internet Explorer 8.0</li>
			<li>Firefox 3.0</li>
			<li>Firefox 3.5</li>
			<li>Safari 4.0</li>
			<li>Google Chrome</li>
			<li>Lynx</li>
		</ul>
		<p>El más problemático de todos los navegadores es el Internet Explorer. Es con éste con el que vamos a sufrir verificando para cada una de sus distintas versiones. Firefox pega saltos de versión que requieren al usuario instalar de manera manual la nueva versión, por eso siempre hay momentos de transición paulatina entre versiones de Firefox. De todas maneras la versión 3.0 y 3.5 de Firefox son prácticamente iguales a los fines de este tutorial, cualquiera sirve. Safari y Chrome tienen mecanismos de actualización automatizada que hacen más rápida la transición entre versiones. Chrome es, a términos prácticos, una mezcla entre el Internet Explorer y el Safari, así que generalmente puede obviarse en los testeos, pero conviene tenerlo a mano porque se convirtió en un navegador muy popular en el nicho de los tecnófilos.</p>
		<p>El lynx es un navegador de sólo texto que está disponible en linux y generalmente lo uso para <em>ver</em> la página como la verían los robots de los buscadores. En Windows se puede usar cygwin para correr el lynx. Cuidado con usar el lynx para depurar cuestiones de accesibilidad porque no sirve para eso. Para cuestiones de accesibilidad necesitamos usar las herramientas correspondientes, por ejemplo, usar un lector de pantalla para depurar como funciona una página para usuarios ciegos.</p>
	</div>
	<div class="navegacion">
		<a class="anterior" href="index.html">Anterior</a>
		<a class="siguiente" href="que-es-el-maquetado-html.html">Siguiente</a>
	</div>
<!-- InstanceEndEditable -->
	<div id="licencia">
		<p>Esta obra está bajo una licencia Reconocimiento-No comercial-Sin obras derivadas 2.5 Argentina de Creative Commons. Para ver una copia de esta licencia, visite <a href="http://creativecommons.org/licenses/by-nc-nd/2.5/ar/">http://creativecommons.org/licenses/by-nc-nd/2.5/ar/</a> o envie una carta a Creative Commons, 171 Second Street, Suite 300, San Francisco, California 94105, USA.</p>
	</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-1794443-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
<!-- InstanceEnd --></html>
